<template>
	<uni-nav-bar
		:style="{ position: fixed ? 'fixed' : 'absolute', zIndex: 10, width: '100%' }"
		@clickLeft="clickLeft"
		:left-icon="leftIcon"
		:border="border"
		:title="title"
		:color="color"
		:fixed="fixed"
		:statusBar="statusBar"
		:backgroundColor="background"
		:rightText="rightText"
		@clickRight="onClickRight"
	>
		<template #right>
			<slot name="right" />
		</template>
	</uni-nav-bar>
</template>

<script>
export default {
	name: 'uni-header',
	props: {
		// 点返回箭头默认回到上一页
		isBack: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ''
		},
		leftIcon: {
			type: String,
			default: 'back'
		},
		background: {
			type: String,
			default: '#FFFFFF'
		},
		statusBar: {
			type: [Boolean, String],
			default: true
		},
		fixed: {
			type: [Boolean, String],
			default: true
		},
		border: {
			type: [Boolean, String],
			default: true
		},
		color: {
			type: String,
			default: '#000000'
		},
		rightText: {
			type: String,
			default: ''
		}
	},
	methods: {
		clickLeft() {
			if (!this.isBack) {
				this.$emit('clickLeft');
			} else {
				uni.navigateBack();
			}
		},
		onClickRight() {
			this.$emit('clickRight');
		}
	}
};
</script>

<style lang="scss">
.header-view {
	display: flex;
	height: 40px;
}
</style>
